<template>
    <div v-transfer-dom>
        <x-dialog v-model="showHideOnBlur" class="dialog-layout" hide-on-blur>
            <div class="dialog-container">
                <div class="dialog-matrial">
                    <MaterialItem :data="data"></MaterialItem>
                </div>
                <div class="dialog-btn-group">
                    <button class="button-red" @click="buyItem(data)">{{data.price}}毛解锁这个素材</button>
                    <button class="button-red" @click="buyVIP">1元解锁全部素材</button>
                    <button @click="showHideOnBlur=false">我穷，我用免费的。</button>
                </div>
            </div>
            <div @click="showHideOnBlur=false">
                <span class="vux-close"></span>
            </div>
        </x-dialog>
    </div>
</template>

<script>
import { XDialog, TransferDomDirective as TransferDom } from 'vux';

import MaterialItem from './MaterialItem';

export default {
    name: 'BuyDialog',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        show: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            showHideOnBlur: this.show
        };
    },
    methods: {
        buyVIP() {
            this.$buy('5bfaa33d68194d39b9f81aea88b6808b', 1, 1);
        },
        buyItem(item) {
            this.$buy(item.itemId, 1, 0);
        },
        show() {
            this.showHideOnBlur = true;
        }
    },
    directives: {
        TransferDom
    },
    components: {
        MaterialItem,
        XDialog
    }
};
</script>

<style lang="less" scoped>
@primaryColor: #D3502B;

.dialog-container {
    padding: 98px 0 67px;
    border-radius: 8px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .dialog-matrial {
        width: 127px;
        height: 127px;
        img {
            width: 127px;
            height: 127px;
            border-radius: 30px;
            border: 2px dashed @primaryColor;
        }
    }
    .dialog-btn-group {
        width: 486px;
        margin: 60px auto 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        button {
            width: 100%;
            height: 70px;
            background-color: #FFFFFF;
            color: @primaryColor;
            border: 2px solid @primaryColor;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .button-red {
            background-color: @primaryColor;
            color: #FFFFFF;
        }
    }
}
</style>
